import { defineStore } from 'pinia'
import { store } from '@/store/index'
import { router } from '@/router/index'

interface TabItem {
  name: string;
  title: string;
  path: string;
}
interface Tabs {
  collapse: boolean;
  tabList: TabItem[];
}

export const useTabsStore = defineStore('tabs', {
  state: (): Tabs => {
    return {
      // 如果存在localStorage，则判断localStorage中的值，否则展示左侧菜单栏【展开为false，收缩为true】
      collapse: localStorage.getItem('collapse') ? localStorage.getItem('collapse') === 'true' : false,
      tabList: [
        // { name: 'home', title: '首页', path: '/home' },
        // { name: 'portability-screen', title: '可移动筛选项', path: '/portability-screen' },
        // { name: 'recursion-menu', title: '递归菜单页面', path: '/recursion-menu' },
        // { name: 'qr-code', title: '二维码处理', path: '/qr-code' },
        // { name: 'test-menu2', title: '测试菜单-路由2', path: '/test-menu2' },
        // { name: 'user-manage', title: '用户管理', path: '/user-manage' },
        // { name: 'roles-manage', title: '角色管理', path: '/roles-manage' },
        // { name: 'pinia', title: 'pinia的使用', path: '/pinia' }
      ]
    }
  },
  getters: {}, // 可以将计算属性放在 getters 中使用，以便其在状态变化时产生
  actions: {
    // 伸缩菜单栏
    setCollapse () {
      this.collapse = !this.collapse
      localStorage.setItem('collapse', this.collapse.toString())
    },
    // 添加到tab
    addTab (obj: TabItem) {
      const hasTab = this.tabList.filter(item => item.path === obj.path).length > 0 // 判断他把List中是否包含当前tab
      hasTab || this.tabList.push(obj) // 如果包含，则不添加，否则添加到tabList中
    },
    // 关闭标签页
    removeTab (path: string) {
      if (this.tabList.length > 1) {
        if (path === router.currentRoute.value.path) {
          // 关闭当前页，并打开前一页
          const index = this.tabList.map(item => item.path).indexOf(path) // 查询当前页中的位置下标
          if (index === 0) {
            router.push(this.tabList[1].path) // 如果是在第一页，应该关闭当前页，并打开第二页
          } else {
            router.push(this.tabList[index - 1].path) // 关闭当前页，然后打开前一页
          }
        }
        this.tabList = this.tabList.filter(item => item.path !== path)
      } else {
        // 只有一个页面时，判断是不是首页，是：不关闭，否：关闭并打开首页、
        if (path !== '/home') {
          router.push('/home')
          this.tabList.push({ name: 'Home', title: '首页', path: '/home' })
          this.tabList = this.tabList.filter(item => item.path !== path)
        }
      }
    }
  }
})

export function useTabsStoreWithOut () {
  return useTabsStore(store)
}
